/* 基于https://ext.dcloud.net.cn/plugin?id=1211的CSS进行了相对em调整 */
.progress {
	position: relative;
	z-index: 5;
	background: #484848;
	border: 0.5em solid #282828;
	border-radius: 1.5em;
	display: inline-block;
	box-shadow: 0 0.5em 1.3em rgba(40, 40, 40, 0.5), 0 0 3px 1px rgba(40, 40, 40, 0.5) inset;
}

.progress-text {
	position: absolute;
	font: bold 1em/2em Arial;
	text-align: center;
	top: 0;
	left: 0;
}

.progress,
.progress-bar,
.progress-text {
	width: calc(100% - 1em);
	height: 2em;
}

.progress .progress-text:first-child {
	z-index: 5;
	color: white;
}

.progress .progress-text:last-child {
	z-index: 10;
	color: black;
}

.progress-bar {
	overflow: hidden;
	position: relative;
	z-index: 10;
	border-radius: 1em;
	width: 0;
	-moz-transition: width 0.2s linear;
	-webkit-transition: width 0.2s linear;
	-o-transition: width 0.2s linear;
	transition: width 0.2s linear;
}

/* Test Style 暂时保留，文字显示在外面 */
.progress.test .progress-bar {
	background-color: #00baba;
	background-image: -moz-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: -webkit-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: -o-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: -ms-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: linear-gradient(to right, #d1fffb 0%, #00baba 100%);
	background-size: 10em 2em;
	overflow: visible;
}

.progress.test .progress-text:first-child {
	display: none;
}

.progress.test .progress-text:last-child {
	left: auto;
	top: auto;
	bottom: -2.4em;
	right: -1.5em;
	display: block;
	background-color: #00baba;
	width: 4em;
	height: 2em;
	border-radius: 3px;
}

.test[data-width='0%'] .progress-text:last-child {
	display: none;
}

.progress.test .progress-text:last-child:before {
	position: absolute;
	left: 1.5em;
	top: -0.5em;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0.5em 0.5em 0.5em;
	border-color: transparent transparent #00baba transparent;
}

/* Copper style */
.progress.copper .progress-bar {
	background-color: #b68d4c;
	background-image: -moz-linear-gradient(top, #f3e2c7 0%, #b68d4c 51%, #e9d4b3 100%);
	background-image: -webkit-linear-gradient(top, #f3e2c7 0%, #b68d4c 51%, #e9d4b3 100%);
	background-image: -ms-linear-gradient(top, #f3e2c7 0%, #b68d4c 51%, #e9d4b3 100%);
	background-image: linear-gradient(to bottom, #f3e2c7 0%, #b68d4c 51%, #e9d4b3 100%);
	box-shadow: inset 2px 2px 3px 0 rgba(255, 255, 255, 0.75), inset -3px 0 3px 0 rgba(255, 255, 255, 0.75);
}

/* Aqua Style */
.progress.aqua .progress-bar {
	background-color: #00baba;
	background-image: -moz-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: -webkit-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: -o-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: -ms-linear-gradient(left, #d1fffb 0%, #00baba 100%);
	background-image: linear-gradient(to right, #d1fffb 0%, #00baba 100%);
}

/* Candystripe style */
.progress.candy .progress-bar {
	background-color: #d00;
	box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3) inset;
	background-image: linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.35) 25%,
		rgba(255, 255, 255, 0) 25%,
		rgba(255, 255, 255, 0) 50%,
		rgba(255, 255, 255, 0.35) 50%,
		rgba(255, 255, 255, 0.35) 75%,
		rgba(255, 255, 255, 0) 75%,
		rgba(255, 255, 255, 0)
	);
	background-repeat: repeat-x;
	background-size: 2em 2em;
	-webkit-animation: candystripe 1s linear infinite;
	-moz-animation: candystripe 1s linear infinite;
	animation: candystripe 1s linear infinite;
}

@-webkit-keyframes candystripe {
	to {
		background-position: 2em 0;
	}
}

@-moz-keyframes candystripe {
	to {
		background-position: 2em 0;
	}
}

@keyframes candystripe {
	to {
		background-position: 2em 0;
	}
}

/* Pulsating Neon style */
.progress.neon .progress-bar {
	background-color: #fff;
	box-shadow: 0 0 0.5em #01fe32 inset, 0 0 1.6em #08ff35, 0 0 2em #08ff35, 0 0 1.5em #08ff35;
	-webkit-animation: pulse 2s linear infinite;
	-moz-animation: pulse 2s linear infinite;
	animation: pulse 2s linear infinite;
}

@-webkit-keyframes pulse {
	50% {
		box-shadow: 0 0 0.5em #01fe32 inset, 0 0 1em #08ff35, 0 0 1em #08ff35, 0 0 1em #08ff35;
	}
}

@-moz-keyframes pulse {
	50% {
		box-shadow: 0 0 0.5em #01fe32 inset, 0 0 1em #08ff35, 0 0 1em #08ff35, 0 0 1em #08ff35;
	}
}

@keyframes pulse {
	50% {
		box-shadow: 0 0 0.5em #01fe32 inset, 0 0 1em #08ff35, 0 0 1em #08ff35, 0 0 1em #08ff35;
	}
}

/* Shine style */
.progress.shine .progress-bar {
	background-color: #00ba0c;
	background-image: -moz-linear-gradient(left, #00ba0c 0%, #00ba0c 75%, #d7ffd1 80%, #00ba0c 85%, #00ba0c 100%);
	background-image: -webkit-linear-gradient(left, #00ba0c 0%, #00ba0c 75%, #d7ffd1 80%, #00ba0c 85%, #00ba0c 100%);
	background-image: -o-linear-gradient(left, #00ba0c 0%, #00ba0c 75%, #d7ffd1 80%, #00ba0c 85%, #00ba0c 100%);
	background-image: -ms-linear-gradient(left, #00ba0c 0%, #00ba0c 75%, #d7ffd1 80%, #00ba0c 85%, #00ba0c 100%);
	background-image: linear-gradient(to right, #00ba0c 0%, #00ba0c 75%, #d7ffd1 80%, #00ba0c 85%, #00ba0c 100%);
	background-size: 40em 2em;
	box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.8);
	-webkit-animation: shine 2s linear infinite;
	-moz-animation: shine 2s linear infinite;
	animation: shine 2s linear infinite;
}

@-webkit-keyframes shine {
	to {
		background-position: 40em 0;
	}
}

@-moz-keyframes shine {
	to {
		background-position: 40em 0;
	}
}

@keyframes shine {
	to {
		background-position: 40em 0;
	}
}

/* Zigzag style */
.progress.zigzag .progress-bar {
	background-color: #efe743;
	background-image: -moz-linear-gradient(135deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -moz-linear-gradient(225deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%),
		-moz-linear-gradient(315deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -moz-linear-gradient(45deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%);
	background-image: -webkit-linear-gradient(135deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -webkit-linear-gradient(225deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%),
		-webkit-linear-gradient(315deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -webkit-linear-gradient(45deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%);
	background-image: -o-linear-gradient(135deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -o-linear-gradient(225deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%),
		-o-linear-gradient(315deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -o-linear-gradient(45deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%);
	background-image: -ms-linear-gradient(135deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -ms-linear-gradient(225deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%),
		-ms-linear-gradient(315deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), -ms-linear-gradient(45deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%);
	background-image: linear-gradient(135deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), linear-gradient(225deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%),
		linear-gradient(315deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%), linear-gradient(45deg, #ea0000 25%, rgba(234, 0, 0, 0) 25%);
	background-position: -1em 0, -1em 0, 0 0, 0 0;
	background-size: 2em 2em;
	-webkit-animation: zigzagmove 0.5s linear infinite;
	-moz-animation: zigzagmove 0.5s linear infinite;
	animation: zigzagmove 0.5s linear infinite;
}

@-webkit-keyframes zigzagmove {
	to {
		background-position: 1em 0, 1em 0, 2em 0, 2em 0;
	}
}

@-moz-keyframes zigzagmove {
	to {
		background-position: 1em 0, 1em 0, 2em 0, 2em 0;
	}
}

@keyframes zigzagmove {
	to {
		background-position: 1em 0, 1em 0, 2em 0, 2em 0;
	}
}

/* Diamond style */
.progress.diamond .progress-bar {
	background-color: #eee;
	background-image: -moz-linear-gradient(45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red),
		-moz-linear-gradient(-45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red);
	background-image: -webkit-linear-gradient(45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red),
		-webkit-linear-gradient(-45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red);
	background-image: -o-linear-gradient(45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red),
		-o-linear-gradient(-45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red);
	background-image: -ms-linear-gradient(45deg, red 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red),
		-ms-linear-gradient(-45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red);
	background-image: linear-gradient(45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red),
		linear-gradient(-45deg, red 25%, rgba(255, 0, 0, 0) 25%, rgba(255, 0, 0, 0) 75%, red 75%, red);
	background-size: 1em 1em;
	-webkit-animation: move 1.2s linear alternate infinite;
	-moz-animation: move 1.2s linear alternate infinite;
	animation: move 1.2s linear alternate infinite;
}

@-webkit-keyframes move {
	to {
		background-position: 0.5em -1em;
		background-size: 2em 2em;
	}
}

@-moz-keyframes move {
	to {
		background-position: 0.5em -1em;
		background-size: 2em 2em;
	}
}

@keyframes move {
	to {
		background-position: 0.5em -1em;
		background-size: 2em 2em;
	}
}

.progress.sparkle .progress-bar {
	background-color: #f7a806;
	background-image: url('');
	box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.8);
	-webkit-animation: sparkle 1500ms linear infinite;
	-moz-animation: sparkle 1500ms linear infinite;
	-o-animation: sparkle 1500ms linear infinite;
	animation: sparkle 1500ms linear infinite;
}

//本想改为em，但引入图片高度是64px,修改为em则会导致卡顿感
@-webkit-keyframes sparkle {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 -64px;
	}
}

@-moz-keyframes sparkle {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 -64px;
	}
}

@-o-keyframes sparkle {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 -64px;
	}
}

@keyframes sparkle {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 -64px;
	}
}

.progress.hearts .progress-bar {
	background-image: radial-gradient(circle closest-side at 60% 43%, #bb0033 26%, rgba(187, 0, 51, 0) 27%),
		radial-gradient(circle closest-side at 40% 43%, #bb0033 26%, rgba(187, 0, 51, 0) 27%),
		radial-gradient(circle closest-side at 40% 22%, #dd3355 45%, rgba(221, 51, 85, 0) 46%),
		radial-gradient(circle closest-side at 60% 22%, #dd3355 45%, rgba(221, 51, 85, 0) 46%),
		radial-gradient(circle closest-side at 50% 35%, #dd3355 30%, rgba(221, 51, 85, 0) 31%),
		radial-gradient(circle closest-side at 60% 43%, #bb0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 43%, #bb0033 26%, rgba(187, 0, 51, 0) 27%),
		radial-gradient(circle closest-side at 40% 22%, #dd3355 45%, rgba(221, 51, 85, 0) 46%),
		radial-gradient(circle closest-side at 60% 22%, #dd3355 45%, rgba(221, 51, 85, 0) 46%),
		radial-gradient(circle closest-side at 50% 35%, #dd3355 30%, rgba(221, 51, 85, 0) 31%);
	background-color: #b03;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 0 0;
	background-size: 4em 4em;
	-webkit-animation: heartmove 1.2s linear infinite;
	-moz-animation: heartmove 1.2s linear infinite;
	animation: heartmove 1.2s linear infinite;
}

@-webkit-keyframes heartmove {
	to {
		background-position: 2em 0;
	}
}

@-moz-keyframes heartmove {
	to {
		background-position: 2em 0;
	}
}

@keyframes heartmove {
	to {
		background-position: 4em 0, 4em 0, 4em 0, 4em 0, 4em 2em, 4em 2em, 4em 2em, 4em 2em, 4em 2em, 4em 0px;
	}
}